<!--
 * @Author: Meow
 * @Date: 2019-10-10 22:50:59
 * @LastEditors: Meow
 * @LastEditTime: 2019-10-30 16:23:26
 * @Description: 组织机构档案
 -->
<template>
  <div id="InstitutionalFile">
    <div class="container">
      <div class="view">
        <!-- 左侧树 -->
        <div class="AsideBox">
          <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
          <div class="Aside">
 
            <el-scrollbar :native="false" tag="section" class="el-scroll">
              <el-tree
                class="filter-tree"
                :data="treeData"
                :props="defaultProps"
                default-expand-all
                :filter-node-method="filterNode"
                ref="tree"
                @node-contextmenu="rightClick"
              ></el-tree>
            </el-scrollbar>
          </div>
        </div>

        <!-- 添加目录弹出层 -->
        <el-dialog
          width="30%"
          title="添加目录"
          :visible.sync="dialogVisible"
          :before-close="handleClose"
        >
          <el-form ref="form" label-width="80px">
            <el-form-item label="上级目录">
              <el-select v-model="form.parentId" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.catalogId"
                  :label="item.catalogName"
                  :value="item.catalogId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="目录名称">
              <el-input v-model="form.catalogName"></el-input>
            </el-form-item>
            <!-- <el-form-item label="目录类型">
              <el-select v-model="form.catalogType" placeholder="请选择">
                <el-option
                  v-for="item in typeList"
                  :key="item.catalogId"
                  :label="item.dictName"
                  :value="item.dictName"
                ></el-option>
              </el-select>
            </el-form-item>-->
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="Submit">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 确认删除目录弹出层 -->
        <el-dialog width="30%" title="删除目录" :visible.sync="dialogVisible2">
          <span>是否删除{{selectNode.name}}目录？</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible2 = false">取 消</el-button>
            <el-button type="primary" @click="delNode">确 定</el-button>
          </span>
        </el-dialog>
        <div class="right">
          <div class="container">
            <div class="view">
              <div class="top tr">
                <el-breadcrumb separator=">>">
                  <el-breadcrumb-item :to="{ path: '/' }">当前位置：</el-breadcrumb-item>
                  <el-breadcrumb-item>
                    <a href="/">组织机构档案</a>
                  </el-breadcrumb-item>
                  <el-breadcrumb-item>福州市人民政府办公厅</el-breadcrumb-item>
                </el-breadcrumb>
              </div>
              <div class="table">
                <el-tabs value="first">
                  <el-tab-pane label="数据需求清单" name="first">
                    <div>
                      <el-table
                        :data="tableData1"
                        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                        v-loading="Loading"
                        element-loading-text="数据加载中"
                        element-loading-spinner="el-icon-loading"
                        element-loading-background="rgba(21, 29, 54, 0.8)"
                        border
                        highlight-current-row
                        @selection-change="selChange"
                      >
                        <el-table-column
                          align="center"
                          :show-overflow-tooltip="true"
                          prop="orgName"
                          label="序号"
                        ></el-table-column>
                        <el-table-column
                          align="center"
                          :show-overflow-tooltip="true"
                          prop="count"
                          label="所需数据"
                        ></el-table-column>
                        <el-table-column
                          align="center"
                          :show-overflow-tooltip="true"
                          prop="sum"
                          label="需求描述"
                        ></el-table-column>
                        <el-table-column
                          align="center"
                          :show-overflow-tooltip="true"
                          prop="date"
                          label="需求处室"
                        ></el-table-column>
                        <el-table-column
                          align="center"
                          :show-overflow-tooltip="true"
                          prop="balance"
                          label="需求采集人"
                        ></el-table-column>
                        <el-table-column
                          align="center"
                          :show-overflow-tooltip="true"
                          prop="balance"
                          label="需求采集时间"
                        ></el-table-column>

                        <el-table-column label="操作" width="200" align="center">
                          <!-- <template slot-scope="scope"> -->
                          <!-- <el-button size="mini"
                                       type="success"
                                       @click="showList(scope.row)">修改</el-button>
                            <el-button size="mini"
                                       type="danger"
                          @click="showList(scope.row)">删除</el-button>-->
                          <!-- </template> -->
                        </el-table-column>
                      </el-table>
                      <div class="bottom">
                        <el-pagination
                          layout="total, sizes, prev, pager, next, jumper"
                          background
                          :page-count="10"
                          :page-sizes="[5, 10, 20, 40]"
                        ></el-pagination>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="业务流程" name="second">
                    <div>
                      <el-form :inline="true" class="demo-form-inline">
                        <el-form-item label="流程名称：">
                          <el-input placeholder="流程名称"></el-input>
                        </el-form-item>

                        <el-form-item>
                          <el-button type="primary">查询</el-button>
                        </el-form-item>
                      </el-form>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="汇交数据清单" name="third">
                    <div>
                      <el-table
                        :data="1"
                        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                        v-loading="Loading"
                        element-loading-text="数据加载中"
                        element-loading-spinner="el-icon-loading"
                        element-loading-background="rgba(21, 29, 54, 0.8)"
                        border
                        highlight-current-row
                        @selection-change="selChange"
                      >
                        <el-table-column
                          align="center"
                          :show-overflow-tooltip="true"
                          prop="orgName"
                          label="序号"
                        ></el-table-column>
                        <el-table-column
                          align="center"
                          :show-overflow-tooltip="true"
                          prop="count"
                          label="数据类型"
                        ></el-table-column>
                        <el-table-column
                          align="center"
                          :show-overflow-tooltip="true"
                          prop="sum"
                          label="数据名称"
                        ></el-table-column>
                        <el-table-column
                          align="center"
                          :show-overflow-tooltip="true"
                          prop="date"
                          label="授权单位"
                        ></el-table-column>
                        <el-table-column
                          align="center"
                          :show-overflow-tooltip="true"
                          prop="balance"
                          label="元数据所在目录"
                        ></el-table-column>
                        <el-table-column
                          align="center"
                          :show-overflow-tooltip="true"
                          prop="balance"
                          label="汇交方式"
                        ></el-table-column>

                        <el-table-column
                          align="center"
                          :show-overflow-tooltip="true"
                          prop="balance"
                          label="汇交时间"
                        ></el-table-column>
                      </el-table>
                      <div class="bottom">
                        <el-pagination
                          layout="total, sizes, prev, pager, next, jumper"
                          background
                          :page-count="10"
                          :page-sizes="[5, 10, 20, 40]"
                        ></el-pagination>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="汇交资源被使用情况" name="fourth">
                    <div>
                      <el-table
                        :data="tableData"
                        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                        v-loading="Loading"
                        element-loading-text="数据加载中"
                        element-loading-spinner="el-icon-loading"
                        element-loading-background="rgba(21, 29, 54, 0.8)"
                        border
                        highlight-current-row
                        @selection-change="selChange"
                      >
                        <el-table-column
                          align="center"
                          :show-overflow-tooltip="true"
                          prop="orgName"
                          label="序号"
                        ></el-table-column>
                        <el-table-column
                          align="center"
                          :show-overflow-tooltip="true"
                          prop="count"
                          label="资源名称"
                        ></el-table-column>
                        <el-table-column
                          align="center"
                          :show-overflow-tooltip="true"
                          prop="sum"
                          label="申请单位"
                        ></el-table-column>
                      </el-table>
                      <div class="bottom">
                        <el-pagination
                          layout="total, sizes, prev, pager, next, jumper"
                          background
                          :page-count="10"
                          :page-sizes="[5, 10, 20, 40]"
                        ></el-pagination>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="允许申请其他单位数据清单" name="five">
                    <div>
                      <el-table
                        :data="tableData"
                        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                        v-loading="Loading"
                        element-loading-text="数据加载中"
                        element-loading-spinner="el-icon-loading"
                        element-loading-background="rgba(21, 29, 54, 0.8)"
                        border
                        highlight-current-row
                        @selection-change="selChange"
                      >
                        <el-table-column
                          align="center"
                          :show-overflow-tooltip="true"
                          prop="orgName"
                          label="序号"
                        ></el-table-column>
                        <el-table-column
                          align="center"
                          :show-overflow-tooltip="true"
                          prop="count"
                          label="数据类型"
                        ></el-table-column>
                        <el-table-column
                          align="center"
                          :show-overflow-tooltip="true"
                          prop="sum"
                          label="名称"
                        ></el-table-column>
                        <el-table-column
                          align="center"
                          :show-overflow-tooltip="true"
                          prop="date"
                          label="归属单位"
                        ></el-table-column>
                        <el-table-column
                          align="center"
                          :show-overflow-tooltip="true"
                          prop="date"
                          label="所在目录"
                        ></el-table-column>
                      </el-table>
                      <div class="bottom">
                        <el-pagination
                          layout="total, sizes, prev, pager, next, jumper"
                          background
                          :page-count="10"
                          :page-sizes="[5, 10, 20, 40]"
                        ></el-pagination>
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 鼠标位置模态框 -->
    <div v-show="menuVisible">
      <ul id="menu" class="menu">
        <li class="menu__item" @click="addNodeDialog">添加</li>
        <!-- <li class="menu__item">重命名</li> -->
        <li class="menu__item" @click="dialogVisible2=true">删除</li>
      </ul>
    </div>
  </div>
</template>
<script>
import InstitutionalFileApi from "@/httpUtils/InstitutionalFile/institutionalFile";
export default {
  name: "InstitutionalFileView",
  data() {
    return {
      Loading: false, // 加载中
      // 右键选中的节点id和name
      selectNode: {
        id: "",
        name: ""
      },
      tableData: [],
      menuVisible: false, // 右键树是否显示菜单栏
      // 添加目录-表单参数
      form: {
        parentId: "", // 父节点列表所选的值
        catalogName: "", // 目录名称
        catalogType: "org" // 目录类型
      },
      dialogVisible: false, // 添加目录弹出层
      dialogVisible2: false, // 删除目录弹出层
      options: [], // 添加目录-父节点列表
      typeList: [], // 添加目录-目录类型列表
      filterText: "",
      treeData: [],
      data: [],
      defaultProps: {
        children: "child",
        label: "name"
        // children: "children",
        // label: "label"
      }
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  mounted() {
    this.GetTreeData(); // 获取树数据
  },
  methods: {
    handleClick() {
      // this.$message.warning("该功能正在优化中...");
    },
    selChange() {
      // this.$message.warning("该功能正在优化中...");
    },
    // 获取树
    GetTreeData() {
      // console.log(InstitutionalFileApi)
      InstitutionalFileApi.treeData().then(res => {
        this.treeData = res.data.data;
      });
    },
    // 获取父节点列表和目录类型
    GetFatherList() {
      // 获取父节点列表
      InstitutionalFileApi.findCatalogList().then(res => {
        console.log(" 获取父节点列表--------------", res.data.data);
        res.data.data.unshift({
          catalogId: "0",
          catalogName: "无"
        });
        this.options = res.data.data;
      });
      // 获取目录类型列表
      // InstitutionalFileApi.queryDictInfoByType({
      //   typeCode: "1000001118686629"
      // }).then(res => {
      //   console.log(" 获取目录类型列表--------------", res.data.data);
      //   this.typeList = res.data.data;
      // });
    },
    // 显示添加目录弹出层
    addNodeDialog() {
      this.dialogVisible = true;
      this.GetFatherList();
    },
    // 添加目录
    addNode() {
      if (!this.form.catalogName || !this.form.parentId) {
        if (!this.form.catalogName) {
          this.$message.error("请输入目录名称");
        } else {
          this.$message.error("请选择上级目录");
        }
      } else {
        InstitutionalFileApi.addCatalog(this.form).then(res => {
          this.$message({
            message: res.data.message,
            type: res.data.success ? "success" : "waring"
          });
          console.log(" 添加节点结果--------------", res.data);
          if (res.data.code == 200) {
            this.GetTreeData(); // 刷新
          }
          // this.typeList = res.data.data;
        });
      }
    },
    // 删除目录
    delNode() {
      if (this.selectNode.id && this.selectNode.name) {
        this.dialogVisible2 = false; // 关闭弹出层
        InstitutionalFileApi.deleteCatalogById({
          catalogId: this.selectNode.id
        }).then(res => {
          this.$message({
            message: res.data.message,
            type: res.data.success ? "success" : "waring"
          });
          console.log(" 添加节点结果--------------", res.data);
          if (res.data.code == 200) {
            this.GetTreeData(); // 刷新
          }
          // 清空选中的目录
          this.selectNode = {
            id: "",
            name: ""
          };
        });
      }
    },
    // 点击提交-添加节点
    Submit() {
      this.dialogVisible = false;
      this.addNode(this.form); // 添加节点
    },
    // tree点击右键菜单
    rightClick(MouseEvent, data, Node, element) {
      console.log("MouseEvent", MouseEvent);
      // console.log("data", data);
      // console.log("Node", Node);
      // console.log("element", element);

      this.menuVisible = false;
      this.menuVisible = true; // 显示模态窗口，跳出自定义菜单栏
      var menu = document.querySelector("#menu");
      //  定位树节点offsetLeft
      console.log(
        "!!!!!!!!!!!!!!!!",
        MouseEvent,
        MouseEvent.clientX,
        MouseEvent.offsetLeft
      );
      // var Aside = document.querySelector(".Aside").offsetLeft;
      menu.style.left = MouseEvent.clientX + "px";
      menu.style.top = MouseEvent.clientY - 82 + "px";
      document.addEventListener("click", this.foo); // 给整个document添加监听鼠标事件，点击任何位置执行foo方法

      // console.log('右键被点击的event:', MouseEvent)
      console.log("右键被点击的data:", data);
      this.selectNode = {
        id: data.id,
        name: data.name
      };
      // console.log("右键被点击的data:", data.id);
      // console.log('右键被点击的value:', Node)
      // console.log('右键被点击的element:', element)
      // console.log('鼠标点击了树形结构图')
    },
    foo() {
      // 取消鼠标监听事件 菜单栏
      this.menuVisible = false;
      document.removeEventListener("click", this.foo); // 要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
    },

    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    // ---------------------------
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },

    // //  鼠标移动到节点触发事件
    appendPath(params) {
      //拼接节点关系并显示在左下角，
      var myChart = echarts.init(document.getElementById("main"), "macarons");

      var option = myChart.getOption();
      var series = option.series[params.seriesIndex]; //获取图表
      var nodesOption = series.data; //获取所有数据
      var links = series.links; //获取所有连线
      if (params.dataType == "node") {
        //dataType可以是edge(线条)或node(数据)
        var id = params.data.id - 1;
        var categoryName = series.categories[params.data.category].name; //获取当前节点的图例名称
        var str = categoryName + ":" + nodesOption[id].name;
        console.log("当前数据", nodesOption[id]);
        if (categoryName === "业务流程") {
          str =
            str +
            "，业务名称：" +
            nodesOption[id].nickname +
            "，业务密级：" +
            nodesOption[id].level +
            "，业务边界：" +
            nodesOption[id].boundary +
            "，子流程：<a href=" +
            nodesOption[id].link +
            ">" +
            nodesOption[id].link +
            "</a>";
        } else if (categoryName === "业务系统") {
          str =
            str +
            "，系统名称：" +
            nodesOption[id].nickname +
            "，建设部门：" +
            nodesOption[id].department +
            "，汇交时间：" +
            nodesOption[id].time;
        } else if (categoryName === "组织机构") {
          str =
            str +
            "，名称：" +
            nodesOption[id].nickname +
            "，上级单位：" +
            nodesOption[id].SuperiorUnit;
        }

        // var i = 0;
        // var map = {};
        // for (i = 0; i < links.length; i++) {
        //   map[links[i].source] = links[i].target;
        // }
        // while (true) {
        //   if (map[id] == undefined) {
        //     break;
        //   }
        //   //获取父节点的图例名称并连接//  获取上下级并展示
        //   str = series.categories[nodesOption[map[id]].category].name + ":" + nodesOption[map[id]].name + "->" + str;
        //   str = series.categories[nodesOption[map[id]].category].name + ":" + nodesOption[map[id]].name + "->" + str;

        //   id = map[id];
        // }
        return str;
      } else if (params.dataType == "edge") {
        //当鼠标停留在连线上时，暂不处理
        return "";
      }
    },
    openOrFold(params) {
      //该事件会提示节点间关系
      var str = this.appendPath(params);
      document.getElementById("main_1").innerHTML = str;
      return str;
    }
  }
};
</script>
<style lang="less" scoped>
.menu__item {
  padding: 0.08rem 0.3rem;
}

.menu {
  z-index: 1000;
  position: fixed;
  // position: absolute;
  left: 0;
  top: 0;
  padding: 0.1rem 0;
  max-width: 2rem;
  border: 1px solid #eeeeee;
  background-color: #fff;
  border-radius: 0.05rem;
}

li:hover {
  background-color: #2d3a4b;
  color: white;
  cursor: pointer;
}
@import url("./InstitutionalFile.less");
</style>